<template>
    <!-- 部门 -->
    <!--  1、新增部门的时候不用管科室    -->
    <!--  2、新增科室的时候必须选部门    -->
    <div id="department">
        <!-- 响应式布局 -->
        <!--<el-row >  默认占满屏 一用就把左边的覆盖了，不知道为什么 -->
        <div style="width: 100%;height: 85px;background-color: #FAFAFA;padding-top: 1%;">
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin:0 0 0 1%">
                <el-input placeholder="部门名称" v-model="DepartmentName"></el-input>
            </el-col>
            <el-col :xs="3" :sm="2" :md="2" :lg="2" style="margin: 0 1%">
                <el-select v-model="valueFactory" clearable placeholder="隶属工厂">
                    <el-option v-for="item in FactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                </el-select>
            </el-col>
            <el-col :xs="15" :sm="15" :md="12" :lg="10" style="text-align: left">
                <el-button type="primary" @click="selectTable">查询</el-button>
                <el-button type="success" @click="addDepartment">新增部门</el-button>
            </el-col>
        </div>
        <!-- max-height 600时就固定表头，显示滚动条  show-overflow-tooltip 表格内容多了可以显示一个提示框显示剩余内容   sortable排序 -->
        <el-table  max-height="600" class="table_department" stripe border ref="multipleTable" :data="tableData" tooltip-effect="dark"
                   style="width: 88%;text-align: center !important;">
            <!-- 部门 -->
            <el-table-column prop="index" sortable width="60"></el-table-column>
            <el-table-column prop="DepartmentCode" sortable label="部门代号"></el-table-column>
            <el-table-column prop="DepartmentName" label="部门名称"></el-table-column>
            <el-table-column prop="FactoryName" sortable label="工厂名称"></el-table-column>
            <el-table-column prop="HeadCount" sortable label="人员总数"></el-table-column>
            <el-table-column prop="FactoryID" label="工厂号" v-if="false"></el-table-column>
            <!--  部门号  部门名称  -->
            <el-table-column label="人员详情">
                <template scope="scope">
                    <el-button type="primary" size="small" @click="handlePeople(scope.$index, scope.row)">
                        人员
                    </el-button>
                </template>
            </el-table-column>
            <el-table-column prop="OpeartionUseID" label="操作人员工号" v-if="false"></el-table-column>
            <el-table-column prop="OpeartionUseName" label="操作人员"></el-table-column>
            <el-table-column prop="ModifyDate" sortable label="时间"></el-table-column>
            <!-- 修改和删除 -->
            <el-table-column label="操作" fixed="right">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <el-button size="small" type="danger"
                            @click="handleDelete(scope.$index, scope.row)">删除</el-button>
                </template>
            </el-table-column>
        </el-table>
        <!-- 分页 -->
        <div class="block" style="text-align: right;padding: 4% 1% 0 0">       <!-- , jumper 加到layout里面 前往第 几 页     -->
            <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :page-size="PageCount" :page-sizes="[10, 20, 30, 40,50]"
                           :current-page="CurrentPage"  layout="total,sizes, prev, pager, next" :total="Total"></el-pagination>
        </div>
        <!-- 新增部门  必须要选工厂 -->
        <el-dialog title="新增部门" :visible.sync="addFormVisible">
            <el-form :model="form" style="text-align: left;width: 90%;margin: auto">
                <!-- 选择工厂的时候就应该把父级部门拿到 -->
                <el-form-item label="隶属工厂" :label-width="formLabelWidth">
                    <el-select v-model="valueFactoryAdd" clearable placeholder="请选择">
                        <el-option  v-for="item in FactoryOptionsAdd" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门代号" :label-width="formLabelWidth">
                    <el-input v-model="form.DepartmentCode" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" :label-width="formLabelWidth">
                    <el-input v-model="form.DepartmentName" auto-complete="off" style="width: 50%"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="addFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="addForm">确 定</el-button>
            </div>
        </el-dialog>
        <!-- 修改部门 -->
        <el-dialog title="修改部门" :visible.sync="EditFormVisible">
            <el-form :model="formEdit" style="text-align: left">
                <!-- 请求所有工厂的下拉框  -->
                <el-form-item label="工厂名称" :label-width="formLabelWidthEdit">
                    <!--<el-input v-model="formEdit.FactoryName" auto-complete="off" style="width: 80%;"></el-input>-->
                    <el-select v-model="formEdit.FactoryID" clearable placeholder="隶属工厂">
                        <el-option v-for="item in EditFactoryOptions" :key="item.ID" :label="item.FactoryName" :value="item.ID"></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="部门代号" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.DepartmentCode" :disabled="true" style="width: 80%;"></el-input>
                </el-form-item>
                <el-form-item label="部门名称" :label-width="formLabelWidthEdit">
                    <el-input v-model="formEdit.DepartmentName" auto-complete="off" style="width: 80%;"></el-input>
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="EditFormVisible = false">取 消</el-button>
                <el-button type="primary" @click="EditForm">提 交</el-button>
            </div>
        </el-dialog>
        <!-- 删除部门 -->
        <el-dialog title="删除部门" :visible.sync="DeleteFormVisible">
            <el-form :model="formDelete">
                <el-form-item style="font-size: 18px;">
                    确定删除此部门吗？
                </el-form-item>
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="DeleteFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="DeleteForm" >确定</el-button>
            </div>
        </el-dialog>
        <!-- 人员详情 -->
        <el-dialog title="人员详情" :visible.sync="PeopleFormVisible">
            <el-form :model="formPeople" >
                <el-table  max-height="600" class="table_department" stripe border ref="mutiplePeopleTable" :data="PeopleTable" tooltip-effect="dark"
                           style="width: 90%;text-align: center !important;">
                    <el-table-column prop="index" sortable label="序号"></el-table-column>
                    <!--<el-table-column prop="formPeople.DepartmentName" sortable label="部门名称"></el-table-column>-->
                    <el-table-column prop="EntryDate" sortable label=入职时间></el-table-column>
                    <el-table-column prop="Sex" sortable label="性别"></el-table-column>
                    <el-table-column prop="UserCode" sortable label="工号"></el-table-column>
                    <el-table-column prop="UserName" label="姓名"></el-table-column>
                </el-table>
                <!-- 穿梭框 ！！！！！！！！！！！！！！！！   key: 'value',   ！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！！ -->
                <!--<el-transfer style="text-align: left;padding: 0 30%;"-->
                             <!--filterable-->
                             <!--filter-placeholder="请输入员工号"-->
                             <!--:titles="['非本部门', '本部门']"-->
                             <!--v-model="value"-->
                             <!--:props="{-->
                                <!--key: 'JobNumber',-->
                                <!--label: 'UserName'-->
                             <!--}"-->
                        <!--:data="DepartDate">-->
                <!--</el-transfer>-->
            </el-form>
            <div slot="footer" class="dialog-footer">
                <el-button @click="PeopleFormVisible = false">取 消</el-button>
                <el-button type="danger" @click="PeopleForm" >确定</el-button>
            </div>
        </el-dialog>
    </div>
</template>

<script type="text/ecmascript-6">
    export default{
        data(){
            return{
                //   穿梭框
//                DepartDate:[],  //  该工厂下所有部门的人员
//                value:[],
                //    表格
                tableData:[],
                FactoryName:'',
                FactoryOptions:[],    //  工厂   一加载页面就出现工厂的下拉框
                valueFactory:'',    //  选择的是哪个工厂号
                //  修改时的字段
                DepartmentCode:'',   //  部门号
                DepartmentName:'',   //  部门名
                //  查询的时候传过去的后台参数
                DepartManagerName:'',   //  主管名称
                FactoryID:'' ,   //  工厂号
                //     分页
                PageCount:10,    // 每页几条   page-size
                CurrentPage:1,   // 当前是第几页
                Total:0,    // 总数
                //   新增部门     将 form表单改成自己的参数
                valueFactoryAdd:'',
                FactoryOptionsAdd:[],    //  工厂
                addFormVisible: false,
                form: {
                    DepartmentCode:'',
                    DepartmentName:'',
                    FactoryID:0  //  工厂号   //   确认选择的是哪个工厂，从而确定此工厂下所有的父级
                },
                formLabelWidth: '100',
                //  修改部门
                EditFactoryOptions:[],  //  一点 编辑  获取工厂下拉框
                EditFormVisible: false,
                formEdit:{
                    ParentDepartID: 0      //   根据该行里面选中的是哪个工厂，从而得到该工厂下面所有的父级部门
                },
                formLabelWidthEdit:'100',
                //  删除部门
                DeleteFormVisible: false,
                formDelete:{},
                formLabelWidthDelete:'100',
                //  详细人员展示
                PeopleFormVisible:false,
                mutiplePeopleTable:[],
                PeopleTable:[],    //  人员表格
                formPeople:{},
                formLabelWidthPeople:'100'
            }
        },
        methods:{
            //   一加载页面就应该知道有哪些工厂
            selectFactory(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptions = [];
                let Code = response.data.Code;
                if(Code == 200){   // 正常请求到数据
                    this.FactoryOptions = response.data.ObjList ;
                }
            }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //   分页
            handleSizeChange(val) {
                this.PageCount = val ;   //  每页几条
                this.selectTable();
            },
            handleCurrentChange(val) {
                this.CurrentPage = val ;   // 当前是第几页
                this.selectTable();     //  点击分页的时候
            },
            //   get  传给后台值  供查询使用  显示部门列表  已完
            selectTable(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                //     加的去空判断
                this.isLoding=true;
                this.DepartmentName = this.DepartmentName.trim();
                this.FactoryID = this.FactoryID.trim();
                url = "http://192.168.3.238:8088/Department/GetDepartmentPage?DepartmentName=" + this.DepartmentName +
                    "&FactoryID=" + this.valueFactory+
                    "&PageCount="+this.PageCount+"&CurrentPage="+ this.CurrentPage;
                console.log(url)
                this.$http.get(url,).then(response => {
                    this.tableData=[];
                let Code = response.data.Code;
                if(Code == 200){   // 正常请求到数据
                    this.Total = response.data.Total;
                    for(let i=0;i<response.data.ObjList.length;i++){
                        this.tableData.push(response.data.ObjList[i]);
                        response.data.ObjList[i].index=i+1;
                    }
                }
                console.log("请求数据 》》》》》》》》")
                console.log(response)
            }, response => {
                    console.log("表格添加失败")
                    console.log(response)
                })
            },
            //   新增部门
            //   一点击新增  就应该知道有哪些工厂
            selectFactoryAdd(){    // 校验输入信息正确性 ，不对直接  return
                let url;
                url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.FactoryOptionsAdd = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.FactoryOptionsAdd = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            addDepartment() {
                this.selectFactoryAdd();
                this.addFormVisible = true;
            },
            addForm(){     //   post
                let addUrl = "http://192.168.3.238:8088/Department/AddDepartment";
                let addForm = {
                    "DepartmentCode": this.form.DepartmentCode,
                    "DepartmentName": this.form.DepartmentName,
                    "FactoryID": this.valueFactoryAdd,   // 工厂ID
                    "OperationUser": 1,
                };
                console.log("新增")
                console.log(addForm)
                console.log(addUrl)
                let that = this;
                if (this.form.DepartmentName.length === 0) {
                    console.log("请输入工序名称");
                    return 0;
                } else {
                    this.$http.post(addUrl, addForm, {
                        headers: {
                            'Content-Type': 'application/x-www-form-urlencoded'
                        }
                    })
                        .then(function (response) {
                            that.addFormVisible = false;
                            that.selectTable();
                            console.log("添加成功");
                            console.log(response);
//                        需要提示
                        })
                        .catch(function (error) {
                            console.log(error);
                            console.log("错误");
                        });
                }
            },
            //  一点击 编辑按钮 就是获取下拉框
            EditSelectFactory(){
                let url = "http://192.168.3.238:8088/Department/GetFactoryInfo" ;
                this.$http.get(url,).then(response => {
                    this.EditFactoryOptions = [];
                    let Code = response.data.Code;
                    if(Code == 200){   // 正常请求到数据
                        this.EditFactoryOptions = response.data.ObjList ;
                    }
                }, response => {
                    console.log(" 工厂请求失败");
                    console.log(response)
                })
            },
            //   编辑修改部门   post
            handleEdit(index, row) {
                this.EditSelectFactory();
                this.EditFormVisible = true;
                this.formEdit = row ;
                this.ParentDepartID();    //  主管ID为 0 ，把ID置为null
                console.log("修改部门获取的全部字段");
                console.log(this.formEdit);
                //  部门号不能修改，只是作为参数传给后台
            },
            EditForm() {    //   post
                let EditUrl = "http://192.168.3.238:8088/Department/UpdateDepartment";
                let EditForm = {
                    "DepartmentName":this.formEdit.DepartmentName,   //  部门名称
                    "DepartmentCode":this.formEdit.DepartmentCode,   //  部门号
                    "FactoryID":this.formEdit.FactoryID,   //  工厂名称
                    "OperationUser":1
                };
                console.log("修改部门的时候传的什么");
                console.log(EditForm);
                console.log(EditUrl);
                let that = this ;
                this.$http.post(EditUrl, EditForm, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        that.EditFormVisible = false;
                        that.selectTable();
                        console.log("修改成功");
                        console.log(response);
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            //   删除部门
            handleDelete(index, row) {
                this.DeleteFormVisible = true ;
                this.formDelete = row ;
            },
            DeleteForm(){
                let DeleteUrl = "http://192.168.3.238:8088/Department/DeleteDepartment";
                let deleteItem = {   //  跟后端约定好的JSON格式
                    DepartmentCode:this.formDelete.DepartmentCode,
                    OperationUser:1,
                };
                console.log(DeleteUrl)
                console.log(deleteItem)
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(DeleteUrl, deleteItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("删除成功")
                        that.DeleteFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
//            人员详情
            handlePeople(index, row){
                this.PeopleFormVisible = true ;
                this.formPeople = row ;   // 只需要把选中的部门号给后台就好了
                let PeopleUrl = "http://192.168.3.238:8088/UserInfo/GetDepartUser?DepartCode="+this.formPeople.DepartmentCode ;
                console.log("PeopleUrl 》")
                console.log(PeopleUrl)
                this.$http.get(PeopleUrl,).then(response => {
                    this.PeopleTable = [];
                let Code = response.data.Code;
                if(Code == 200){   // 正常请求到数据
                    this.Total = response.data.Total;
                    for(let i=0;i<response.data.ObjList.length;i++){
                        this.PeopleTable.push(response.data.ObjList[i]);
                        response.data.ObjList[i].index=i+1;
                    }
                }
                console.log("response  》》》》》》》》》》》》》》》》》》》")
                    console.log(response)
            }, response => {
                    console.log(" 表格添加失败")
                    console.log(response)
                });
            },
            PeopleForm(){
                let PeopleUrl = "http://192.168.3.238:8088/Department/AddDepartUser";
                let PeopleItem = {   //  跟后端约定好的JSON格式
                    "JobNumberS": this.value ,
                    "DepartID": this.formPeople.DepartmentCode,
                };
                let that = this;  //   that管用吗   管用的，想自动刷新就在执行成功的方法里重新  searchTable 就行了
                this.$http.post(PeopleUrl, PeopleItem, {
                    headers: {
                        'Content-Type': 'application/x-www-form-urlencoded'
                    }
                })
                    .then(function (response) {
                        console.log("成功")
                        console.log(response);
                        that.PeopleFormVisible = false;     //  关闭窗口
                        that.selectTable();
//                        需要提示
                    })
                    .catch(function (error) {
                        console.log("错误");
                        console.log(error);
                    });
            },
            // 部门号为0 ，则置为null
            ParentDepartID(){
                if(this.formEdit.ParentDepartID == 0){
                    this.formEdit.ParentDepartID = null ;
                }
            }
        },
        mounted :function () {   //  onload
            this.selectFactory();   // 请求到工厂的下拉框
            this.selectTable();    //  请求到表格
        }
    }
</script>



<style>
    * {
        padding: 0;
    }

    html,
    body {
        height: 100%;
        width: 100%;
        overflow: hidden;
        margin: 0;
    }

    #department {
        height: 100%;
    }
    /* 表头数据居中 */
    .table_department thead tr th {
        text-align: center;
    }

</style>